<template>
    <div>
      <MHeader :back="true">添加</MHeader>
      <div class="content">
        <ul>
          <li>
            <label for="bookname">书名</label>
            <input type="text" v-model="book.bookName" id="bookname">
          </li>
          <li>
            <label for="bookinfo">信息</label>
            <input type="text" v-model="book.bookInfo" id="bookinfo">
          </li>
          <li>
            <label for="bookPrice">价格</label>
            <input type="text" v-model.number="book.bookPrice" id="bookPrice">
          </li>
          <li>
            <label for="bookCover">图片</label>
            <input type="text" v-model.number="book.bookCover" id="bookCover">
          </li>
          <li>
            <button @click="add">添加</button>
          </li>
        </ul>
      </div>

    </div>
</template>

<script>
  import MHeader from '../base/MHeader'

  import {addBook} from '../api'


  export default {
    data() {
      return {book: {}}
    },
    methods: {
      async add(){ // 点击修改图书信息
        console.log(this.book)
        await addBook(this.book);
        this.$router.push('/list'); // 修改完成后跳转页面
      }
    },
    computed: {},
    components: {MHeader}
  }
</script>

<style scoped lang="less">
  ul {
    margin:50px 10px 0 10px;
    li{
      label{
        display: block;
        font-size: 25px;
      }
      input{
        height: 25px;
        width: 100%;
        margin: 10px 0;
      }
      button{
        display: block;
        width: 60px;
        height: 25px;
        background: #67d6ff;
        color: #fff;
        border: none;
        border-radius: 4px;
        outline: none;
      }
    }
  }
</style>
